<template>
  <div class="ueditor-container">
    <textarea
      :id="ueditorId"
      :value="value"
      class="ueditor-textarea"
    />
  </div>
</template>

<script>
  import load from './dynamicLoadScript'
  import toolbar from './toolbar'

  const ueditorURL = [
    'ueditor.config.js',
    'ueditor.all.js'
  ]

  export default {
    name: 'Ueditor',
    props: {
      id: {
        type: String,
        default: () => {
          return 'vue-ueditor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
        }
      },
      value: {
        type: String,
        default: ''
      },
      toolbar: {
        type: Array,
        required: false,
        default: () => []
      },
      height: {
        type: Number,
        required: false,
        default: 160
      }
    },
    data () {
      return {
        hasChange: false,
        hasInit: false,
        ueditorId: this.id
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        // 动态添加Ueditor相关脚本
        const loads = []
        ueditorURL.forEach(url => {
          loads.push(load(url))
        })
        Promise.all(loads).then(result => {
          this.initUeditor()
        })
      },
      initUeditor () {
        const self = this
        const configUrl = process.env.UEDITOR_CONFIG_URL
        self.$nextTick(() => {
          // 自定义上传请求地址
          UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
          UE.Editor.prototype.getActionUrl = function(action) {
            if (action === 'uploadimage') {
              return '/admin/mation/upload/image'
            } else if (action === 'config') {
              return configUrl
            } else {
              return this._bkGetActionUrl.call(this, action)
            }
          }
          const ue = window.UE.getEditor(this.ueditorId, {
            toolbars: this.toolbar.length > 0 ? this.toolbar : toolbar,
            zIndex: 9999999,
            initialFrameHeight: this.height,
            autoHeightEnabled: false,
            // 关闭图片拉伸功能
            imageScaleEnabled: false,
            // 关闭图片操作的浮层开关
            imagePopup: false,
            // 关闭抓取远程图片
            catchRemoteImageEnable: false,
            // 关闭自动保存
            enableAutoSave: false,
            // 获取 config.json 接口
            imageUrl: configUrl,
            // 上传的文件名
            imageFieldName: 'file',
            // 元素路径
            elementPathEnabled: true,
            // 允许输入最大字符
            maximumWords: 20000
          })
          ue.ready(function () {
            // 修复工具条弹框被 `element-dialog` 遮挡的问题
            // 增加 `#edui_fixedlayer` 弹层的 zIndex
            document.querySelector('.ueditor-container').addEventListener('click', function (evt) {
              document.getElementById('edui_fixedlayer').style.zIndex = '100005'
            })

            self.$emit('ue:ready', ue)

            // 内容改变触发
            ue.addListener('contentchange', function () {
              const content = this.getContent()
              self.$emit('update:value', content)
            })

            // 失去焦点触发
            // ue.addListener('blur', function (e) {
            //   self.$emit('ue:blur', this.getContent())
            // })
          })
        })
      }
    }
  }
</script>